<template>
    <div id="res">
        <ul>
           <li v-for="(itme,index) in malls" :key="itme.id" @click="rout(index)">
               <img :src="itme.img" alt="">
               <p>{{itme.introduce}}</p>
               <span class="span1">{{itme.originalPrice}}</span>
               <span class="span2">{{itme.salesVolume}}</span>
               </li>
                  


        </ul>

    </div>
</template>
<script>
export default {
    name:'Res',
    props:['malls']
        
    ,

    data(){
        return{
            mall:[]

        }

    },
    created(){
        this.axios.get('data/mall.json').then(res =>{
            this.mall = res.data

        })
    },
    methods:{
        rout(index){
            this.$router.push({
                path:'/details' ,
                query:{
                   ma: this.mall[index]
                }
            })
            
            // console.log(this.mall[index])
        }
    }
}
</script>
<style scoped>
ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}
li{
    width: 45%;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    
    
}
img{
    width: 95%;
    height: 80%;
   
}
p{
    width: 100%;
    overflow: hidden;    
    text-overflow:ellipsis;    
    white-space: nowrap;
}
.span1{
    font-size: 20px;
    color: #ff5000;
    margin-right: 5px;
}
.span2{
    font-size: 13px;
}

</style>